<template>
  <div class="mod-config">
    <div class="z-querybar">
      <el-date-picker v-model="dataForm.daterange" style="width: 280px;" align="center" :clearable="false"
        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-select clearable v-model="dataForm.dispatchType" placeholder="请选择触发类型" style="width: 146px;">
        <el-option v-for="type in typeList" :key="type.value" :label="type.label" :value="type.value"></el-option>
      </el-select>
      <el-select filterable clearable v-model="dataForm.productContainerId" placeholder="请选择污水池" style="width: 210px;">
        <el-option v-for="container in containerList" :key="container.id" :label="container.name" :value="container.id"></el-option>
      </el-select>
      <el-select clearable v-model="dataForm.status" placeholder="请选择状态" style="width: 150px;">
        <el-option v-for="status in statusList" :key="status.value" :label="status.label" :value="status.value"></el-option>
      </el-select>
      <z-search-btn @click="currentChangeHandle(1)"></z-search-btn>
      <span style="float: right;">
        <z-add-btn @click="addOrUpdateHandle()" name="手动调度"></z-add-btn>
      </span>
    </div>
    <div class="z-pagecontent">
      <el-table :data="dataList" border stripe v-loading="dataListLoading" style="width: 100%;" :height="maxHeight" :span-method="objectSpanMethod">
        <el-table-column prop="name" header-align="center" align="left" label="调度名称" width="200">
        </el-table-column>
        <el-table-column header-align="center" align="center" label="污水池" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">{{ containerMap[scope.row.productContainerId] }}</template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="收运单位" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">{{ unitMap[scope.row.ctUnitId] }}</template>
        </el-table-column>
   
        <el-table-column header-align="center" align="center" label="收运车辆" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">{{ carMap[scope.row.dispatchCarId + ''] }}</template>
        </el-table-column>
         <el-table-column header-align="center" align="center" label="司机姓名" min-width="106" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.userName  }}</template>
        </el-table-column>
            <el-table-column header-align="center" align="center" label="电话" min-width="106" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.mobile  }}</template>
        </el-table-column>
          <el-table-column header-align="center" align="center" label="任务状态" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="status-btn" @click="scanTaskPath(scope.row.taskId)" v-if="scope.row.taskStatus === '1' || scope.row.taskStatus === '2' || scope.row.taskStatus === '01'">
              {{ statusMap[scope.row.taskStatus] }}
            </span>
            <span v-else>{{ statusMap[scope.row.taskStatus] }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="调度状态" min-width="110" show-overflow-tooltip>
          <template slot-scope="scope">{{ statusMap[scope.row.status] }}</template>
        </el-table-column>
        <el-table-column prop="syWeight" header-align="center" align="center" label="收运量" min-width="70">
          <template slot-scope="scope">{{ scope.row.syWeight || '' }}</template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="收运开始时间" min-width="136" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.executeDay && scope.row.executeDay.substr(0, 16) }}</template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="收运完成时间" min-width="136" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.endTime && scope.row.endTime.substr(0, 16) }}</template>
        </el-table-column>
             <el-table-column header-align="center" align="center" label="收运任务分配时间" min-width="136" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.startTime && scope.row.startTime.substr(0, 16) }}</template>
        </el-table-column>
        <!-- <el-table-column header-align="center" align="center" label="收运量">
          <template slot-scope="scope">
            {{ scope.row.taskSyWeight || '' }}
          </template>
        </el-table-column> -->
         <el-table-column header-align="center" align="center" label="触发类型" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">{{ typeMap[scope.row.dispatchType] }}</template>
        </el-table-column>
      
        <!-- <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">取消</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"
      :containerList="containerList" :carList="carList">
    </add-or-update>
    <task-path ref="taskPath" v-if="taskPathVisible"></task-path>
  </div>
</template>

<script>
import { formatDate } from '@/utils/timeUtils'
import AddOrUpdate from './signcardispatch-add-or-update'
import TaskPath from './task-path'
export default {
  components: { AddOrUpdate, TaskPath },
  data () {
    const now = new Date()
    const pre = new Date(now.getTime() - 3600000 * 24 * 7)
    return {
      maxHeight: document.documentElement.clientHeight - 260,
      unitList: [],
      unitMap: {},
      containerList: [],
      containerMap: {},
      carList: [],
      carMap: {},
      statusList: [
        { value: '-1', label: '待分配司机收运' },
        { value: '0', label: '待司机同意收运' },
        { value: '01', label: '司机拒绝收运了' },
        { value: '1', label: '司机正在收运' },
        { value: '2', label: '司机收运完成' }
      ],
      statusMap: {
        '-1': '待分配司机收运',
        '0': '待司机同意收运',
        '01': '司机拒绝收运了',
        '1': '司机正在收运',
        '2': '司机收运完成'
      },
      typeList: [
        { value: '0', label: '预警触发' },
        { value: '1', label: '手动调度' },
      ],
      typeMap: {
        '0': '预警触发',
        '1': '手动调度',
      },
      dataForm: {
        daterange: [pre, now],
        dispatchType: '',
        productContainerId: '',
        status: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dispatchSpanArr: [],
      addOrUpdateVisible: false,
      taskPathVisible: false
    }
  },
  mounted () {
    this.getContainerList()
    this.getCarList()
    this.getUnitList()
    this.getDataList()
  },
  methods: {
    getUnitList() {
      this.$http({
        url: this.$http.adornUrl('/sign/signunit/list'),
        method: 'post',
        data: this.$http.adornData({
          page: 1,
          limit: -1
        })
      }).then(({ data }) => {
        const unitMap = {}
        if (data && data.code === 0) {
          this.unitList = data.page.list
          this.unitList.forEach(element => {
            unitMap[element.id + ''] = element.name
          })
        } else {
          this.unitList = []
        }
        this.unitMap = unitMap
      })
    },
    getContainerList () {
      this.$http({
        url: this.$http.adornUrl('/sign/signcontainer/list'),
        method: 'post',
        data: this.$http.adornData({
          page: 1,
          limit: -1
        })
      }).then(({ data }) => {
        const containerMap = {}
        if (data && data.page.list) {
          this.containerList = data.page.list
          this.containerList.forEach(element => {
            containerMap[element.id + ''] = element.name
          })
        } else {
          this.containerList = []
        }
        this.containerMap = containerMap
      })
    },
    getCarList () {
      this.$http({
        url: this.$http.adornUrl('/sign/signcar/list'),
        method: 'post',
        data: this.$http.adornData({
          page: 1,
          limit: -1
        })
      }).then(({ data }) => {
        const carMap = {}
        if (data && data.page.list) {
          this.carList = data.page.list
          this.carList.forEach(element => {
            carMap[element.id + ''] = element.numberPlate
          })
        } else {
          this.carList = []
        }
        this.carMap = carMap
      })
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.dispatchSpanArr = []
      this.$http({
        url: this.$http.adornUrl('/sign/signcardispatch/list'),
        method: 'post',
        data: this.$http.adornData({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'startTime': formatDate(this.dataForm.daterange[0], 'yyyy-MM-dd 00:00:00'),
          'endTime': formatDate(this.dataForm.daterange[1], 'yyyy-MM-dd 23:59:59'),
          'status': this.dataForm.status,
          'dispatchType': this.dataForm.dispatchType,
          'productContainerId': this.dataForm.productContainerId
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          // this.dataList = data.page.list
          const itemList = []
          data.page.list.forEach(e => {
            if (e.taskList && e.taskList.length > 0) {
              e.taskList.forEach(task => {
                const item = {}
                item.id = e.id
                item.name = e.name
                item.dispatchType = e.dispatchType
                item.ctUnitId = e.ctUnitId
                item.productContainerId = e.productContainerId
                item.status = e.status
                item.syWeight = e.syWeight
                item.taskId = task.id
                item.taskName = task.name
                item.taskStatus = task.status
                item.dispatchCarId = task.dispatchCarId
                item.startTime = task.startTime
                item.executeDay = task.executeDay
                item.endTime = task.endTime
                item.taskSyWeight = task.syWeight

                var user = task.user
                if (user != null) {
                  item.mobile =  user.mobile;
                  item.userName =  user.username;
                }

                itemList.push(item)
              })
            } else {
              const item = {}
              item.id = e.id
              item.name = e.name
              item.dispatchType = e.dispatchType
              item.ctUnitId = e.ctUnitId
              item.productContainerId = e.productContainerId
              item.status = e.status
              itemList.push(item)
            }
          })
          this.dispatchSpanArr = this.getSpanArr(itemList, 'id')
          this.dataList = itemList
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    scanTaskPath (taskId) {
      this.taskPathVisible = true
      this.$nextTick(() => {
        this.$refs.taskPath.init(taskId)
      })
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    getSpanArr(dataList, propName) {
      const spanArr = []
      let pos = 0
      for (var i = 0; i < dataList.length; i++) {
        if (i === 0) {
          spanArr.push(1)
        } else {
          // 判断当前元素与上一个元素是否相同
          if (dataList[i][propName] === dataList[i - 1][propName]) {
            spanArr[pos] += 1
            spanArr.push(0)
          } else {
            spanArr.push(1);
            pos = i
          }
        }
      }
      return spanArr
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 4 || columnIndex > 8) {
        const _row = this.dispatchSpanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      } else {
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: 1,
          colspan: 1
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.status-btn {
  color: #3D84F8;
  text-decoration: underline;
  cursor: pointer;
}
</style>

